<script setup lang="ts">

import {computed, ref} from "vue";
import {UpdateUserInfoReqVO, UserInfo} from "@/interfaces/user-info";
import {useStore} from "vuex";
import {useUpdateUserInfoApi} from "@/services/api";
import {onLoad} from "@dcloudio/uni-app";

const store = useStore()
const uToastRef = ref()
const form = ref()
const userInfo = computed((): UserInfo => store.getters["auth/getUserInfo"])
const userId = computed(() => store.getters["auth/getUserId"])
const model = ref<UpdateUserInfoReqVO>({
  id: "",
  avatar: "",
  nickName: "",
  phoneNumber: ""
})
const changeAvatar = (uToastRef: any) => {
  uni.chooseImage({
    count: 1,
    success: res => {
      const imageUrl = res.tempFilePaths[0]; // 返回选定照片的本地文件路径列表
      uni.uploadFile({
        url: 'http://localhost/api/admin/upload',
        filePath: imageUrl,
        name: 'file',
        header: {
          'content-type': 'multipart/form-data',
          'Authorization': store.getters["auth/getToken"]
        },
        success: async res => {
          const {code, data} = JSON.parse(res.data)
          if (code === 0) {
            model.value.avatar = data
            uToastRef.show({
              type: 'success',
              message: "上传成功，记得保存",
            })
          } else {
            const {code} = JSON.parse(res.data)
            await uToastRef.show({
              type: 'error',
              message: "上传失败",
            })
            if (code === 401000) {
              await store.dispatch("auth/logout")
            }
          }
        }
      });
    }
  })
}
const isActivateNickName = ref<boolean>(false)
const isActivatePhoneNumber = ref<boolean>(false)
const style = ref({
  border: '10rpx solid #E8CCC7',
  boxShadow: '5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3),-5rpx -5rpx 10rpx rgba(255, 255, 255, 1);'
})
const activateStyle = ref({
  border: '10rpx solid #E8CCC7',
  boxShadow: '5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3),-5rpx -5rpx 10rpx rgba(255, 255, 255, 1),5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3) inset,-5rpx -5rpx 10rpx rgba(255, 255, 255, 1) inset;'
})
const handleSubmit = async () => {
  model.value.id = userId.value
  await useUpdateUserInfoApi(model.value)
  await store.dispatch("auth/reloadUserInfo")
  await uni.navigateBack();
}
onLoad(()=>{
  model.value = {
    id:userId.value,
    nickName:userInfo.value.nickName,
    phoneNumber:userInfo.value.phoneNumber,
    avatar:userInfo.value.avatar
  }
})
</script>

<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="content">
      <view class="avatar" @tap="changeAvatar(uToastRef)">
        <up-avatar :src="model.avatar" size="120"
                   :default-url="userInfo.avatar ? userInfo.avatar : 'http://localhost:8080/images/avatar.jpg'"></up-avatar>
      </view>
      <view class="form-item">
        <u--form
            labelPosition="left"
            :model="model"
            ref="form"
            labelWidth="120"
        >
          <u-form-item
              label="昵称"
              prop="nickName"
          >
            <u--input
                v-model="model.nickName"
                :customStyle="isActivateNickName ? activateStyle : style"
                @tap="isActivateNickName = !isActivateNickName"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="手机号"
              prop="phoneNumber"
          >
            <u--input
                v-model="model.phoneNumber"
                :customStyle="isActivatePhoneNumber ? activateStyle : style"
                @tap="isActivatePhoneNumber = !isActivatePhoneNumber"
            ></u--input>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="submit">
      <view class="submit-content">
        <up-button
            type="error"
            shape="circle"
            @click="handleSubmit"
        >
          保存
        </up-button>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.container:before {
  content: '';
  background-color: #45496a;
  z-index: -2;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

.container:after {
  content: '';
  background-color: #e8ccc7;
  z-index: -1;
  position: absolute;
  width: 200vw;
  height: 200vw;
  border-radius: 50%;
  bottom: -25%;
  left: -50%;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  margin-top: 96rpx;
  border-radius: 50%;
  background-color: #45496a;
  padding: 15rpx;
  box-shadow: 5rpx 5rpx 30rpx rgba(0, 0, 0, 0.5),
  -5rpx -5rpx 30rpx rgba(255, 255, 255, 0.3),
  2rpx 2rpx 15rpx rgba(0, 0, 0, 0.3) inset,
  -2rpx -2rpx 15rpx rgba(255, 255, 255, 0.3) inset;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-item {
  margin-top: 150rpx;
  width: 90%;
}

.submit {
  position: absolute;
  bottom: 3%;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-content {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>